<template>
   <!-- <div class="footer nav">
        <ul >
            <li><router-link exact to="/"><img class="first" src="../assets/image/tab_ic_home_nor.png"/><br/>首页</router-link></li>
            <li><router-link :to="{name : 'cart', params:{id: 123} }"><img src="../assets/image/tab_ic_school_nor.png"/><br/>购物</router-link></li>
            <li><router-link to="/about"><img src="../assets/image/tab_ic_news_nor.png"/><br/>周边</router-link></li>
            <li><router-link to="/my"><img src="../assets/image/tab_ic_mine_nor.png"/><br/>我的</router-link></li>
        </ul>
    </div> -->
    <div class="footer navs">
    <ul>
      <li v-for="(item, index) in menuList" :key="index">
        <router-link :to="item.url" activeClass="active" :exact="true">
          <img class="icon" :class="item.iconUrl" /><br/>{{item.name}}
        </router-link>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data () {
    return {
      menuList: [
        {name: '首页', url: '/', iconUrl: 'i-home'},
        {name: '购物', url: '/cart', iconUrl: 'i-video'},
        {name: '周边', url: '/about', iconUrl: 'i-news'},
        {name: '我的', url: '/my', iconUrl: 'i-user'}
      ],
      menuActiveId: 0
    }
  }
}
</script>
<style lang="less" scoped>
*{
    margin:0;
    padding:0;
}
.footer{
    width:100%;
    font-size:.4rem;
    position: fixed;
    bottom:0;
    background: pink;
}
// .footer ul{
//     position: relative;
//     left: -.2rem;
// }
// .footer ul li{
//     float:left;
//     width:25%;
//     height:1.2rem;
//     position: relative;
//     // top:.5rem;
//     list-style: none;
//     text-align: center;
// }
// .footer a{
//     display:inline-block;
//     text-decoration: none;
//     color:#000;
// }
// .footer a.router-link-active{
//     color:#c10514;
// }

 .navs{height:1.6rem;
    background-color:#fff;
    ul{ display:table; width:100%; max-width:750px; margin:0 auto; padding-top:.22rem; text-align:center; border-top:1px solid #CCCCCC; }
    li{ display:table-cell; }
    a{ display:block; width:100%; height:1.6rem; color:#999; font-size:.4rem;
      &.active{color:#FF8200;}
    }
  }
  .i-home{ background-image:url(../assets/image/tab_ic_home_nor.png); }
  .i-video{ background-image:url(../assets/image/tab_ic_school_nor.png); }
  .i-news{ background-image:url(../assets/image/tab_ic_shopping_nor.png); }
  .i-user{ background-image:url(../assets/image/tab_ic_mine_nor.png); }
  .i-home,
  .i-video,
  .i-news,
  .i-user{ width:.6rem; height:.6rem;background-repeat: no-repeat; background-size:100% 100%}
  .active{
    .i-home{ background-image:url(../assets/image/tab_ic_home_sel.png);}
    .i-video{ background-image:url(../assets/image/tab_ic_school_sel.png); }
    .i-news{ background-image:url(../assets/image/tab_ic_shopping_sel.png); }
    .i-user{ background-image:url(../assets/image/tab_ic_mine_sel.png); }
  }
</style>
